<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1. 定义一个根标签,未来将利用react动态创建的元素插入到这个根标签中,从而渲染到页面上 -->
    <div id="root"></div>

    <!-- 2. 引入react.js和react-dom.js-->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel是为了让babel帮我们编译jsx -->
    <script src="./js/babel.js"></script>

    <!-- 3. 根据需求,先创建虚拟dom -->
    <!-- 加了type属性,则表示这个script标签的代码需要被babel编译 -->
    <script type="text/babel">
      // 假设这个对象就是从服务器拿回来的用户信息
      const user = {
        name: '龙夏林',
        hobby: '女',
        sex: '妖',
      }
      // 插值表达式要详细讨论的两个问题:
      // 1. 插值表达式在jsx中可以写在哪里
      // 1.1 写在标签的子节点的位置. 一定是为了渲染插值表达式中的内容
      // 1.2 写在标签的属性的位置. 一定是为了控制属性
      // 2. 插值表达式里面可以写什么
      // 可以写任何的js表达式
      // 什么是js表达式: 简单来说,一段js代码运行之后会得到一个结果(值)

      // 下面这些都是表达式
      // 字面量  1 'abc' false {name:'zs} [1,2,3]
      // 变量,常量
      // 函数
      // 函数调用
      // 运算

      // const a = 1  声明语句不是表达式
      // if, switch 分支语句不是表达式
      // for,while 循环语句不是表达式

      // 注意:
      // 1. 不要直接渲染普通对象,会直接报错,页面上什么都渲染不出来
      // 2. 不要直接渲染函数和NaN,会警告
      // 3. 不要直接渲染布尔值,undefined,null,不会报错,也不会警告,页面也不渲染内容
      // 4. 如果直接渲染了数组,会把数组中每一个元素当做一个子节点渲染出来
      // 5. 如果渲染一个函数调用,渲染的是函数的返回值.并且函数的代码会被执行

      let a = 1
      let b = { xxx: 1 }
      function xxx() {
        console.log(123)
      }
      const element = (
        <div>
          {/*<h1>首页</h1>
          <p>欢迎您: {user.name}</p>
          <p>爱好: {user.hobby}</p>
          <p>性别: {user.sex}</p>
          <button disabled={false}>按钮</button>*/}

          {/* <div>{let a = 1}</div>*/}
          {/*<div>{if(true){}}</div>*/}
          {/*<div>{while(false){}}</div>*/}
          <div>{1}</div>
          <div>{'abc'}</div>
          {/*注意: 直接渲染布尔值,null,undefined,页面上什么都没有. 渲染NaN会警告*/}
          {/*<div>{true}</div>
          <div>{null}</div>
          <div>{undefined}</div>
          <div>{NaN}</div>*/}
          {/*注意: 插值表达式中可以传入对象,但是不能渲染普通对象*/}
          {/*<div>{{ name: 'zs' }}</div>
          <div>{<span>123</span>} </div>*/}
          {/*注意: 如果直接渲染数组,react会自动将数组中的每一个元素,当做一个子节点去渲染*/}
          <div>{[1, 2, 3]}</div>
          {/*注意: 变量和常量是可以渲染的,但是最终呈现什么样子取决于里面的数据*/}
          {/*<div>{a}</div>
          <div>{b}</div>*/}
          {/*注意: 不要直接渲染函数,没有意义.会警告*/}
          <div>{function () {}}</div>
          {/*注意: 插值表达式中可以传入函数调用,最终渲染的是函数的返回值. 并且函数中的代码会执行*/}
          <div>{xxx()}</div>
          <div>{true ? 'ok' : 'fail'}</div>
        </div>
      )

      //   4. 根据第三步已经创建出来的虚拟dom,生成真实dom,并插入到root中最终渲染到页面上
      ReactDOM.createRoot(document.getElementById('root')).render(element)
    </script>
  </body>
</html>
